import React, { useEffect, useState } from 'react'
import { View } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { AtAvatar, AtButton, AtInput, AtTextarea } from 'taro-ui'
import env from '../../store/env.config'

import './reg.scss'

const Reg: React.FC = (props) => {
  const [userName, setUserName] = useState('' as any)
  const [password, setPassword] = useState('' as any)
  const [password2, setPassword2] = useState('' as any)
  const [remark, setRemark] = useState('' as any)
  const [avatar, setAvatar] = useState('' as any)

  const reset = () => {
    setUserName('')
    setPassword('')
    setPassword2('')
    setRemark('')
  }

  const reg = () => {
    if (avatar === '') {
      Taro.getUserProfile({
        desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
        success: (res) => {
          // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
          setUserName(res.userInfo.nickName)
          setAvatar(res.userInfo.avatarUrl)
        },
      })
      return
    }

    if (password === '') {
      Taro.showToast({
        title: '密码不能为空',
        icon: 'error',
        duration: 1000,
      })
      return
    }
    if (password2 === '') {
      Taro.showToast({
        title: '请再次确认密码',
        icon: 'error',
        duration: 1000,
      })
      return
    }

    if (password2 !== password) {
      Taro.showToast({
        title: '两次密码不一致',
        icon: 'error',
        duration: 1000,
      })
      return
    }
    postRes()
  }

  const postRes = () => {
    Taro.showLoading({
      title: '注册中',
    })

    Taro.request({
      url: `${env.domain}/user/register`,
      method: 'POST',
      data: {
        username: userName,
        password: password,
        avatar: avatar,
        remark: remark,
      },
      success: (res) => {
        if (res.data.code == 200 && res.data.data !== null) {
          let resUserInfo = res.data.data

          setTimeout(function () {
            Taro.hideLoading()
          }, 1000)
          setTimeout(() => {
            Taro.setStorage({
              key: 'userInfo',
              data: resUserInfo,
            })
            Taro.switchTab({
              url: '/pages/index/index',
            })
          }, 2000)
          return
        }
        setTimeout(function () {
          Taro.hideLoading()
        }, 1000)
        Taro.showToast({
          title: '注册失败',
          icon: 'error',
          duration: 2000,
        })
      },
    })
  }

  return (
    <View className='login-back'>
      <View className='title'></View>
      <View className='at-row' style={{ margin: '10px 10px' }}>
        <View className='at-col at-col-2' style={{ marginTop: '20px' }}>
          <AtAvatar size='large' image={avatar}></AtAvatar>
        </View>
        <View className='at-col at-col-10'>
          <AtInput
            name='password'
            title='密码'
            type='password'
            placeholder='请输入密码'
            value={password}
            required={true}
            onChange={(val) => {
              setPassword(val)
            }}
          />
          <AtInput
            name='password2'
            title='密码'
            type='password'
            placeholder='请再次输入密码'
            value={password2}
            required={true}
            onChange={(val) => {
              setPassword2(val)
            }}
          />
        </View>
      </View>

      <View style={{ margin: '10px 10px' }}>
        <AtTextarea
          value={remark}
          onChange={(val) => {
            setRemark(val)
          }}
          maxLength={200}
          placeholder='请输入您的个人简介...'
        />
      </View>

      <View>
        <View className='at-row' style={{ margin: '10px 10px' }}>
          <View className='at-col at-col-4'>
            <AtButton
              onClick={() => {
                Taro.reLaunch({
                  url: '/pages/login/login',
                })
              }}
              type='primary'
            >
              去登陆
            </AtButton>
          </View>
          <View className='at-col at-col-3'></View>
          <View className='at-coat-col at-col-4'>
            <AtButton onClick={reset} type='secondary'>
              重置
            </AtButton>
          </View>
        </View>
        <View style={{ margin: '10px 10px' }}>
          <AtButton onClick={reg} type='primary'>
            注册
          </AtButton>
        </View>
      </View>
    </View>
  )
}

export default Reg
